<%--
  Created By: adrian
  Date Created: 3:59 PM 6/5/13
--%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    $(document).ready(function () {

        $("#addMember").click(function () {
            if($("#nonMembers option:selected").val() != undefined){
                $.ajax({
                    type: "POST",
                    data: $("#assignForm").serialize(),
                    url: 'assign',
                    cache: false,
                    async: false
                }).done(function () {
                            $("#membersTable").append(
                                    '<tr id="tr'+ $("#nonMembers option:selected").val()+'">' +
                                            '   <td id="td'+ $("#nonMembers option:selected").val()+'">' +
                                            ' '+   $("#nonMembers option:selected").text() +
                                            '   </td>' +
                                            '   <td>' +
                                            '       <input type="button" value="Remove" class="remove" id="'+ $("#nonMembers option:selected").val()+'"/>' +
                                            '   </td>' +
                                            '</tr>');

                            $("#nonMembers option:selected").remove();
                        });
            }
        });


        $(".remove").live("click",function () {
            perId =    $(this).attr("id");
            projId =  $("#projectId").val();
            $.ajax({
                type: "POST",
                data: {
                    projectId:projId,
                    personId:perId
                },
                url: 'unassign',
                cache: false,
                async: false
            }).done(function () {
                        $("#nonMembers").append(
                                ' <option value="'+perId+'">'+$("#td"+perId).text()+'</option>'
                        );

                        $("#tr"+perId).remove();
                    });

        } );


    });

</script>
<head>
    <title>Project Assignments - ${project.name}</title>
</head>
<body>
<div style="width: 30%;border:1px solid;">
    New Member <br/>
    <form:form id="assignForm" modelAttribute="assignDTO">
        <form:hidden path="projectId" id="projectId"/>
        <form:select path="personId" id="nonMembers" style="width:200px;">
            <c:forEach var="n" items="${notMembers}">
                <option value="${n.id}"><c:out value="${n.firstName }"/> <c:out value="${n.lastName}"/></option>
            </c:forEach>

        </form:select>
        <input type="button" id="addMember" value="Add">
    </form:form>
    <br/>
    <br/>
    Current Members
    <table style="width: 100%;" id="membersTable">
        <c:forEach var="m" items="${projectMembers}">
            <tr id="tr${m.id}">
                <td id="td${m.id}">
                    <c:out value="${m.firstName }"/> <c:out value="${m.lastName}"/>
                </td>
                <td>
                    <input type="button" value="Remove" class="remove" id="${m.id}"/>
                </td>
            </tr>
        </c:forEach>
    </table>
</div>
</body>
</html>